<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <style>
        .el-dialog__body {
            /*height: 30vh;*/
            overflow: auto;
        }

        @media (max-width: 1366px) {
            #emergencyNumberManage .table-wrap {
                height: 500px !important;;
                overflow: auto;
            }
        }
    </style>
</head>
<body>
<div id="emergencyNumberManage" class="center_div" style="display:none;">
    <div class="searchForm" style="margin-top: 1%;margin-left: 1%">
        <template>
            号码：
            <el-input v-model="number" size="mini" style="width: 10%"></el-input>
        </template>
        <el-button type="primary" size="mini" @click="query">查询</el-button>
        <el-button type="primary" size="mini" @click="add">添加</el-button>
    </div>
    <div class="table-wrap" style="margin-left: 1%">
        <el-table
                :data="tableData"
                style="width:100%;text-align: center;border-left:1px solid #EBEBEB"
                header-cell-style="font-size:15px;text-align:center;color:#515A6E;padding:10px 0px 10px 0px !important;background:#F5F5F6;border:1px solid #EBEBEB;border-left:none"
                cell-style="font-size:13px;text-align:center;color:#606266;padding:5px 0px 5px 0px !important;border:1px solid #EBEBEB;border-top:none;border-left:none">
         <!--   <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>-->
            <el-table-column v-for="title in tableTitle" :prop="title.prop" :label="title.label">
            </el-table-column>
            <template v-if="buttons && buttons.length!==0">
                <el-table-column
                        class="align-right"
                        width="230px"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button v-for="button in buttons"
                                   @click="operate(scope.row,button.href)" :type="button.type"
                                   class="el-button el-button--text el-button--medium">{{button.label}}
                        </el-button>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <el-pagination
                layout="prev, pager, next"
                @current-change="changePageNum"
                :current-page="pageNum"
                :page-size="pageSize"

                :total="total">
        </el-pagination>
    </div>
    <div>
        <el-dialog :title="title"
                   :visible.sync="showBox"
                   width="30%"
                   @close="closeDialog"

                   append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
              <!--  <el-row>
                    <el-col :span="12">
                        <el-form-item label="前缀"  prop="prefix">
                            <el-input  v-model="form.prefix" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="区号"  prop="areaCode">
                            <el-input  v-model="form.areaCode" clearable type="number" :min="0"
                                       onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>-->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="号码"  prop="number">
                            <el-input  v-model="form.number" clearable type="number" :min="0"
                                       onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="名称"  prop="name">
                            <el-input v-model="form.name" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!--<el-row>
                    <el-col :span="12">
                        <el-form-item label="系统类型" :required="true">
                            <el-select v-model="form.system" placeholder="请选择">
                                <el-option
                                        v-for="item in systemOptions"
                                        :key="item.System_ID"
                                        :label="item.System_alias"
                                        :value="item.System_ID">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    </el-col>
                </el-row>-->
                <el-row>
                    <el-form-item label="描述" prop="remark">
                        <el-input v-model="form.remark" type="textarea" ></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item>
                        <el-button type="primary" @click="addEmergencyNumber" v-show="showAdd">添加</el-button>
                        <el-button type="primary" @click="updateEmergencyNumber" v-show="!showAdd">修改</el-button>
                        <el-button type="primary" @click="closeBox">取消</el-button>
                    </el-form-item>
                </el-row>

            </el-form>
        </el-dialog>
    </div>
</div>
</body>
<script>
    VueComponent.createEmergencyNumberManage = function () {
        if (window.emergencyNumberManageVue) {
            return;
        }
        window.emergencyNumberManageVue = new Vue({
            el: "#emergencyNumberManage",
            data: {
                number: '',
                tableTitle: [
                    {label: '前缀', prop: 'prefix'},
                    {label: '号码', prop: 'number'},
                    {label: '名称', prop: 'name'},
                    {label: '区号', prop: 'areaCode'},
                    //{label: '系统类型', prop: 'System_alias'},
                    {label: '描述', prop: 'remark'}
                ],
                rules: {
                    prefix: [
                        {required: true, message: '请输入前缀', trigger: 'blur'},
                        {pattern: /^[0-9]*$/, message: '前缀必须为数字', trigger: 'blur'},
                    ],
                    number: [
                        {required: true, message: '请输入号码', trigger: 'blur'},
                        {pattern: /^-?\d+\.?\d*$/, message: '号码必须为数字', trigger: 'blur'}
                    ],
                    areaCode: [
                        {required: true, message: '请输入区号', trigger: 'blur'},
                        {pattern: /^[0-9]*$/, message: '区号必须为数字', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度不能超过20个字符', trigger: 'blur'}
                    ],
                    remark: [
                        {min: 1, max: 128, message: '长度不能超过128个字符', trigger: 'blur'}
                    ],
                },
                tableData: [],
                total: 0,
                pageNum: 1,
                pageSize: 15,
                buttons: [{label: "编辑", href: "update"}, {label: "删除", href: "delete"}],
                showBox: false,
                showAdd: true,
                title: '',
                form: {
                    id: '',
                    prefix: '',
                    number: '',
                    name: '',
                    areaCode: '',
                    system: '',
                    remark: ''
                },
                systemOptions: [],
            },
            mounted: function () {
                this.query();
                // this.getSystem();
            },
            methods: {
                getSystem: function () {
                    axios.post('/scs/fleetManage/getSystem', {})
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.systemOptions = data.obj.list;
                                } else {
                                    this.$message(res.msg);
                                }
                            } else {
                                this.$message(res.msg);
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },

                query: function () {
                    var data = {
                        number: this.number || '',
                        pageNum: this.pageNum,
                        fleetId: window.fleetId,
                        pageSize: this.pageSize
                    };
                    axios.post('/scs/emergencyNumberManage/getEmergencyNumber', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.tableData = data.obj.list;
                                    this.total = data.obj.total;
                                } else {
                                    this.$message('');
                                }
                            } else {
                                this.$message('');
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                add: function () {
                    var that = this;
                    that.showBox = true;
                    that.showAdd = true;
                    that.title = "添加紧急号码";
                },
                closeDialog(){

                    this.$nextTick(function () {
                        this.$refs["form"].resetFields();
                    });
                },
                addEmergencyNumber: function () {
                    var validate = false;
                    this.$refs["form"].validate((valid) => {
                        if (valid) {
                            validate = true;
                        } else {
                            console.log('error submit!!');
                            validate = false;
                            return false;
                        }
                    });
                    if (validate === false) {
                        return;
                    }
                    var that = this;
                    var data = {
                        prefix: this.form.prefix,
                        number: this.form.number,
                        name: this.form.name,
                        areaCode: this.form.areaCode,
                        // system:this.form.system,
                        remark: this.form.remark,
                        fleetId: window.fleetId
                    };
                    axios.post('/scs/emergencyNumberManage/addEmergencyNumber', data)
                        .then(function (res) {
                            var res = res.data;
                            if (res.success) {
                                    that.closeBox();
                                    that.$message('添加成功');
                                    that.query();

                            } else {
                                that.$message('添加失败');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
                updateEmergencyNumber: function () {
                    var validate = false;
                    this.$refs["form"].validate((valid) => {
                        if (valid) {
                            validate = true;
                        } else {
                            console.log('error submit!!');
                            validate = false;
                            return false;
                        }
                    });
                    if (validate === false) {
                        return;
                    }
                    var that = this;
                    var data = {
                        id: that.form.id,
                        prefix: this.form.prefix,
                        number: this.form.number,
                        name: this.form.name,
                        areaCode: this.form.areaCode,
                        //   system:this.form.system,
                        remark: this.form.remark
                    };
                    axios.post('/scs/emergencyNumberManage/updateEmergencyNumber', data)
                        .then(function (res) {
                            var res = res.data;
                            if (res.success) {
                                    that.closeBox();
                                    that.$message('编辑成功');
                                    that.query();

                            } else {
                                that.$message('编辑失败');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
                closeBox: function () {
                    this.showBox = false;
                },
                operate: function (row, href) {
                    var that = this;
                    if (href.indexOf('update') !== -1) {
                        console.info("ssssdddd");
                        that.showBox = true;
                        that.showAdd = false;
                        that.title = "编辑紧急号码";
                        that.form.id = row.id;
                        that.form.prefix = row.prefix;
                        that.form.number = row.number;
                        that.form.areaCode = row.areaCode;
                        that.form.name = row.name;
                        //  that.form.system=row.system;
                        that.form.remark = row.remark;
                    } else {
                        this.$confirm('是否确定删除', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            axios.post('/scs/emergencyNumberManage/deleteEmergencyNumber', {id: row.id})
                                .then(function (res) {
                                    var res = res.data;
                                    if (res.success) {
                                        that.$message('删除成功');
                                        //此时已经实现删除操作，所以total的值需要减1，Math.ceil是向上取整，保证始终大于等于1
                                        const totalPage = Math.ceil((that.total - 1) / that.pageSize);
                                        //记住删除最后一条数据时当前码是最后一页
                                        const tempPageNum = that.pageNum > totalPage ? totalPage : that.pageNum;
                                        //实现跳转
                                        that.pageNum = tempPageNum < 1 ? 1 : tempPageNum;
                                        that.query();
                                    }
                                })
                                .catch(function (err) {
                                    console.log(err);
                                });
                        });
                    }
                },
                changePageNum: function (val) {
                    this.pageNum = val;
                    this.query();
                },
            }
        });
    }
</script>
</html>
